<template>
    <div class=" displayFlexC" style="flex: 1">
        <!-- <div class="tenAccountList-top">
            <span style="float:left;line-height:40px;margin-right:10px;">全表搜索：</span>
            <el-input v-model="searchVal" placeholder="" @input="searchEvents" prefix-icon="el-icon-search"></el-input>
        </div> -->
        <vxe-table
        ref="xTable"
        :filter-config="{showIcon: false}"
        border
        stripe
        align="center"
        highlight-hover-row
        :span-method="mergeRowMethod"
        :loading="loading"
        :data="tableData"
        :export-config="{}"
        @checkbox-all="selectAllEvent"
        @checkbox-change="selectChangeEvent"
        row-id="id"
        :seq-config="{startIndex: (tablePage.currentPage - 1) * tablePage.pageSize}"
        :checkbox-config="{reserve: true}">
        <!-- <vxe-table-column field="firmName" type="checkbox" width="60"></vxe-table-column> -->
        <vxe-table-column field="firmName" type="seq" title="序号" width="100"></vxe-table-column>
        <!-- <vxe-table-column field="firmName" title="公司名称">
            <template #default="{ row }">
                {{ row.firmName}}
            </template>
        </vxe-table-column> -->
        <vxe-table-colgroup title="企业名称">
            <vxe-table-column field="firmName" :filters="[{data: ''}]" :filter-method="customStringFilterMethod" width="250">
                <template #header="{ column }">
                    <vxe-input type="text" v-for="(option, index) in column.filters" :key="index" v-model="option.data" @change="filterEvent(option)" placeholder="请输入" clearable prefix-icon="el-icon-search"></vxe-input>
                </template>
            </vxe-table-column>
        </vxe-table-colgroup>
        <vxe-table-column field="assterName" title="资产名称"></vxe-table-column>
        <vxe-table-column field="useYear" title="使用年限"></vxe-table-column>
        <vxe-table-column field="originalValue" title="原值"></vxe-table-column>
        <vxe-table-column field="monthlyDepreciation" title="月折旧"></vxe-table-column>
        <vxe-table-column field="depreciationYear" title="年度折旧"></vxe-table-column>
        <vxe-table-colgroup title="资产使用情况">
            <!-- 资产使用情况(0:在用 1:闲置 2:待报废) -->
            <vxe-table-column field="asstersHappening" title="在用">
                <template #default="{ row }">
                    <span v-if="row.asstersHappening == 0">
                        <i class="el-icon-check"></i>
                    </span>
                </template>
            </vxe-table-column>
            <vxe-table-column field="asstersHappening" title="闲置">
                <template #default="{ row }">
                    <span v-if="row.asstersHappening == 1">
                        <i class="el-icon-check"></i>
                    </span>
                </template>
            </vxe-table-column>
            <vxe-table-column field="asstersHappening" title="待报废">
                <template #default="{ row }">
                    <span v-if="row.asstersHappening == 2">
                        <i class="el-icon-check"></i>
                    </span>
                </template>
            </vxe-table-column>
        </vxe-table-colgroup>
        <vxe-table-column field="happening" title="情况说明"></vxe-table-column>
        </vxe-table>
        <!-- 分页 -->
        <vxe-pager
        perfect
        size="mini"
        :current-page="tablePage.currentPage"
        :page-size="tablePage.pageSize"
        :page-sizes="tablePage.pageSizes"
        :total="tablePage.totalResult"
        :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Total']">
        </vxe-pager>
    </div>
</template>
<style lang="scss" scoped>
@import '../../../styles/all.scss';
</style>
<script>
import { getDataFillingInfo } from '@/api/Data_filling'
import XEUtils from 'xe-utils'
export default {
    props: {
    },
    components:{},
    data(){
        return{
            // 搜索-表格
            // searchVal: '',
            loading: false,
            tableData: [],
            list: [
                { id: 10001, firmName: 'firmName', content: '名称', language: 'zh_CN' },
                { id: 10002, firmName: 'firmName', content: 'Name', language: 'en_US' },
                { id: 10003, firmName: 'app.label.sex', content: '性别', language: 'zh_CN' },
                { id: 10004, firmName: 'app.label.sex', content: 'Sex', language: 'en_US' },
            ],
            // 分页
            tablePage: {
                currentPage: 1,
                pageSize: 3,
                pageSizes: [3, 6, 9, 12],
                totalResult: 0
            },
            checkedBoxList: [],
        }
    },
    watch:{
    },
    methods:{
        // 初始化
        init(page, limit){
            getDataFillingInfo(page, limit).then(res => {
                console.log("固定资产", res)
                this.list = res.data.records
                this.tableData = this.list
                this.tablePage.totalResult = res.data.total
            })
            
        },
        selectAllEvent ({ checked, records }) {
            this.checkedBoxList = records
            // 全选
            console.log(checked ? '所有勾选事件' : '所有取消事件', records)
        },
        selectChangeEvent ({ checked, records }) {
            this.checkedBoxList = records
            // 单选个
            console.log(checked ? '勾选事件' : '取消事件', records)
        },
        // 搜索
        // searchEvents () {
        //     const filterVal = XEUtils.toValueString(this.searchVal).trim().toLowerCase()
        //     const filterRE = new RegExp(filterVal, 'gi')
        //     const searchProps = ['number', 'pname', 'versions', 'price', 'sname', 'time', 'count', 'userName']
        //     const rest = this.list.filter(item => searchProps.some(key => XEUtils.toValueString(item[key]).toLowerCase().indexOf(filterVal) > -1))
        //     this.tableData = rest.map(row => {
        //         const item = Object.assign({}, row)
        //         searchProps.forEach(key => {
        //         item[key] = XEUtils.toValueString(item[key]).replace(filterRE, match => `${match}`)
        //         })
        //         return item
        //     })
        // },
        // 表内查找
        customStringFilterMethod ({ option, row, column }) {
            if (option.data) {
            return XEUtils.toValueString(row[column.property]).toLowerCase().indexOf((option.data).toLowerCase()) > -1
            }
            return true
        },
        filterEvent (option) {
            const xTable = this.$refs.xTable
            // 设置为选中状态
            option.checked = true
            // 修改条件之后，需要手动调用 updateData 处理表格数据
            xTable.updateData()
        },

         // 通用行合并函数（将相同多列数据合并为一行）
        mergeRowMethod ({ row, _rowIndex, column, visibleData }) {
            const fields = ['companyName']
            const cellValue = row[column.property]
            if (cellValue && fields.includes(column.property)) {
                const prevRow = visibleData[_rowIndex - 1]
                let nextRow = visibleData[_rowIndex + 1]
                if (prevRow && prevRow[column.property] === cellValue) {
                    return { rowspan: 0, colspan: 0 }
                } else {
                    let countRowspan = 1
                    while (nextRow && nextRow[column.property] === cellValue) {
                    nextRow = visibleData[++countRowspan + _rowIndex]
                    }
                    if (countRowspan > 1) {
                    return { rowspan: countRowspan, colspan: 1 }
                    }
                }
            }
        }
        
    },
    created(){},
    mounted(){
        this.init(this.tablePage.currentPage, this.tablePage.pageSize)
    },
}
</script>